<template>
    <div class="invite-code">
      <div class="invite-title"><a href="javascript:;" @click="returnHref"><img src="../../assets/img/return.png"></a><p>二维码</p></div>
      <div class="invite-content">
        <h3>我的二维码</h3>
        <div class="my-code">
          <div id="myCode" ref="myCode"></div>
        </div>
      </div>
    </div>
</template>

<script>
  import QRCode from 'qrcodejs2'

  export default {
    data(){
      return{
        codeHref:''
      }
    },
    methods:{
      myCode () {
        let myCode = new QRCode('myCode', {
          width: 280,
          height: 280, // 高度
          text: this.codeHref // 二维码内容
          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          // background: '#f0f'
          // foreground: '#ff0'
        })
      },
      returnHref(){
        this.$router.go(-1)
      },
      getCode(){
        let userId = sessionStorage.getItem('userId')
        this.$axios.get('/user/'+userId+'/share-url',{},this.global().token).then((res)=>{
          if(res.status == 200){
              this.codeHref = res.data.Data
              this.$nextTick (function () {
                this.myCode();
              })
          }
        })
      }
    },
    mounted(){
      this.getCode();
    },
    components: {QRCode}
  }
</script>

<style scoped lang="stylus">
  @import "../../assets/css/title.styl"

  .invite-code
    .invite-content
      padding-top:.3rem
      &>h3
        font-size:.2rem
        color:#000
        text-align center
        padding-bottom .15rem
      #myCode
        width:2.8rem
        margin:0 auto

</style>
